{extend name="public/base" /}
{block name="style"}
<style>
    .vcode-btn {
        color: #1AAD19;
        font-size: 14px;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #1AAD19;
        border-radius: 4px;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
    }

    .vcode-btn:disabled {
        color: #ccc;
        border-color: #ccc;
        cursor: not-allowed;
    }

    /* 图形验证码容器 */
    .captcha-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .captcha-image {
        width: 120px;
        height: 44px;
        background-color: #f5f5f5;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        letter-spacing: 5px;
        user-select: none;
        flex-shrink: 0;
    }

    .refresh-icon {
        color: #888;
        cursor: pointer;
        margin-left: 5px;
        flex-shrink: 0;
    }

    .refresh-icon:hover {
        color: #1AAD19;
    }

    .custom-checkbox input {
        /* 隐藏原生复选框但保留交互能力 */
        opacity: 0;
        width: 18px;
        height: 18px;
        position: absolute;
        cursor: pointer;
    }


    .weui-btn_primary {
        background-color: #1AAD19;
        color: #fff;
    }

    .weui-btn_primary:active {
        background-color: #168f15;
    }

</style>

{/block}
<!--主体-->
{block name="content"}

<!-- 头部导航 -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">用户注册</h1>
</div>

<div class='weui-content'>
    <!-- 注册模块 -->
    <div class="wy-Module">
        <div class="wy-Module-con">
            <form class="weui-form" id="registerForm">
                <!-- 邮箱输入 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <span class="input-label">邮箱</span>
                        <i class="fa fa-envelope input-icon"></i>
                        <input type="email" class="weui-input" placeholder="请输入邮箱号" name="email">
                    </div>
                </div>

                <!-- 图形验证码 -->
                <div class="weui-form-group">
                    <div class="weui-input-box captcha-container">
                        <span class="input-label">图形验证</span>
                        <i class="fa fa-shield input-icon"></i>
                        <input type="text" class="weui-input" placeholder="请输入图形验证码" name="captcha">
                        <div id="captchaImage" class="captcha-image">
                            <img src="/verify" style="width:100%;height:100%;border-radius:4px;">
                        </div>
                        <i class="fa fa-refresh refresh-icon"></i>
                    </div>
                </div>

                <!-- 邮箱验证码 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <span class="input-label">验证码</span>
                        <i class="fa fa-key input-icon"></i>
                        <input type="number" class="weui-input" placeholder="请输入邮箱验证码" name="code">
                        <button type="button" class="vcode-btn" id="getCode">获取验证码</button>
                    </div>
                </div>

                <!-- 邀请码 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <span class="input-label">邀请码</span>
                        <i class="fa fa-user-plus input-icon"></i>
                        <input type="text" class="weui-input" placeholder="请输入邀请码（可选）" name="invite_code" value="{$verify_code}" readonly>
                    </div>
                </div>

                <!-- 密码 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <span class="input-label">密码</span>
                        <i class="fa fa-lock input-icon"></i>
                        <input type="password" class="weui-input" placeholder="6-20位字母数字组合" name="passwd">
                    </div>
                </div>

                <!-- 确认密码 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <span class="input-label">确认密码</span>
                        <i class="fa fa-lock input-icon"></i>
                        <input type="password" class="weui-input" placeholder="再次输入密码" name="repassword">
                    </div>
                </div>
                <!-- 注册按钮 -->
                <button type="submit" class="weui-btn weui-btn_primary" id="registerBtn">注册</button>
            </form>

            <!-- 已有账号登录 -->
            <div class="login-link-wrap">
                <a href="/login.html" class="login-link">已有账号？立即登录</a>
            </div>
        </div>
    </div>
</div>



{/block}
{block name="script"}
<script>
    // 刷新图形验证码
    $("#captchaImage, .refresh-icon").click(function () {
        $("#captchaImage img").attr("src", "/verify?r=" + Math.random());
    });

    // 获取邮箱验证码
    $("#getCode").click(function () {
        var $this = $(this);
        var email = $("input[name='email']").val();
        var captcha = $("input[name='captcha']").val();

        // 邮箱验证
        if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
            $.toptip('请输入有效的邮箱地址', 'error');
            return;
        }

        // 图形验证码验证
        if (!captcha) {
            $.toptip('请输入图形验证码', 'error');
            return;
        }

        // 发送请求
        $.showLoading('发送中');
        $.post("/send-email-code", {email: email, verify_code: captcha}, function (res) {
            $.hideLoading();
            if (res && res.code === 0) {
                $.toptip('验证码已发送', 'success');

                // 倒计时
                var countdown = 60;
                $this.attr("disabled", true).text(countdown + "秒后重试");
                var timer = setInterval(function () {
                    countdown--;
                    if (countdown <= 0) {
                        clearInterval(timer);
                        $this.removeAttr("disabled").text("获取验证码");
                    } else {
                        $this.text(countdown + "秒后重试");
                    }
                }, 1000);
            } else {
                $.toptip(res ? res.msg : '系统错误', 'error');
                $("#captchaImage, .refresh-icon").click();
            }
        }, 'json')
    });
    // 表单提交
    $("#registerForm").submit(function (e) {
        e.preventDefault();
        var email = $("input[name='email']").val();
        var code = $("input[name='code']").val();
        var password = $("input[name='passwd']").val();
        var repassword = $("input[name='repassword']").val();
        // 验证逻辑
        if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
            $.toptip('请输入有效的邮箱地址', 'error');
            return;
        }

        if (!code) {
            $.toptip('请输入邮箱验证码', 'error');
            return;
        }

        if (!password) {
            $.toptip('请输入密码', 'error');
            return;
        }

        if (password.length < 6 || password.length > 20) {
            $.toptip('密码长度需在6-20位之间', 'error');
            return;
        }

        if (password !== repassword) {
            $.toptip('两次输入的密码不一致', 'error');
            return;
        }
        // 提交表单
        $.showLoading('正在注册');
        $.post("/do-register", $(this).serialize(), function (res) {
            $.hideLoading();
            if (res.code == 0) {
                $.toast(res.msg, function () {
                    location.href = '/login.html';
                });
            } else {
                $.toptip(res.msg || '注册失败，请重试');
            }
        }, "json")
    });
</script>
{/block}
